<template>
  <div class="card-box">
    <div class="card-title">
      <span>资料信息</span>
    </div>
    <div class="leadingStepList">
      <el-steps :active="step" align-center>
        <el-step :title="item.title" :class="{'active': item.step === step}" v-for="item in stepList" :key="item.step" />
      </el-steps>
    </div>
    <leading-in-first ref="leadingInFirst" v-if="step===0" @stepNext="stepNext" :clientType="type"></leading-in-first>
    <leading-in-table ref="leadingInTable" v-if="step===1" :tableDataInfo="tableDataInfo" :clientType="type"></leading-in-table>
    <leading-in-thrid ref="leadingInThrid" v-if="step===2" :tableDataInfo="tableDataInfo"></leading-in-thrid>
    <div class="operaList">
      <el-button v-if="step!=0" @click="previous">上一步</el-button>
      <el-button type="primary" @click="next" v-if="step!=2">下一步</el-button>
      <el-button type="primary" v-throttle="[finishReset]" v-else>完成</el-button>
    </div>
  </div>
</template>

<script>
import { delLeadInClientLessees, delLeadInErrorInfos } from '@/views/wy-lessor/landlord/api/lessor'
/*    import {delLeadInClientProvider} from '@/views/client-manage/api/clientprovider'*/
import leadingInFirst from '@/views/wy-lessor/landlord/components/leading-in-first'
import leadingInTable from '@/views/wy-lessor/landlord/components/leading-in-table'
import leadingInThrid from '@/views/wy-lessor/landlord/components/leading-in-thrid'

export default {
  name: "leading-in",
  components: {
    leadingInFirst,
    leadingInTable,
    leadingInThrid
  },
  data () {
    return {
      fileList: [],
      tableDataInfo: {},
      step: 0,//步骤
      type: ''
    }
  },
  computed: {
    //步骤条
    stepList () {
      return [
        { step: 0, title: '第一步' },
        { step: 1, title: '第二步' },
        { step: 2, title: '第三步' },
      ]
    }
  },
  watch: {
    //显示到哪一步
    step () {
      if (this.step > 3) {
        this.step = 3;
      } else if (this.step < 0) {
        this.step = 0;
      }
    }
  },
  mounted () {
    this.type = this.$route.query.clientType;
  },
  beforeDestroy () {
    this.clearErrorData()
  },
  methods: {
    previous () {
      if (this.step === 1) {
        if (this.type) {
          console.log(this.tableDataInfo, "in-this.tableDataInfo")
          if (this.tableDataInfo.clientIds != null && this.tableDataInfo.clientIds != undefined && this.tableDataInfo.clientIds.length != 0) {
            console.log(this.tableDataInfo.clientIds, "previous")
            delLeadInClientProvider({ clientIds: this.tableDataInfo.clientIds }).then(res => {
              if (res.data.data) {
                console.log(res.data.data, "deleted")
              }
            })
          }
        } else {
          console.log(this.tableDataInfo, "in-this.tableDataInfo")
          if (this.tableDataInfo.clientIds != null && this.tableDataInfo.clientIds != undefined && this.tableDataInfo.clientIds.length != 0) {
            console.log(this.tableDataInfo.clientIds, "previous")
            delLeadInClientLessees({ clientIds: this.tableDataInfo.clientIds }).then(res => {
              if (res.data.data) {
                console.log(res.data.data, "deleted")
              }
            })
          }
        }

        this.clearErrorData()
      }
      this.step = this.step - 1
    },
    next () {
      if (this.step === 0) {
        this.$refs.leadingInFirst.next()
      } else {
        this.step = this.step + 1
      }
    },
    clearErrorData () {
      if (this.tableDataInfo.leadInErrorInfoIds != null && this.tableDataInfo.leadInErrorInfoIds != undefined && this.tableDataInfo.leadInErrorInfoIds.length != 0) {
        delLeadInErrorInfos({ leadInErrorInfoIds: this.tableDataInfo.leadInErrorInfoIds }).then(res => {
          if (res.data.data) {
            console.log(res.data.data, "leadInErrorInfoIds")
          }
        })
      }
    },
    finishReset () {
      this.clearErrorData()
      this.$store.commit("delHistoryRoute", this.$route.fullPath);
      this.$router.push("/wy-lessor/landlord")

    },
    stepNext (val) {
      this.tableDataInfo = val
      console.log(this.tableDataInfo, "this.tableDataInfo.val")
      this.step = this.step + 1
    },
  }
}
</script>

<style scoped lang="scss">
.leadingStepList {
  padding: 30px 0 30px;
}
.leadingStepList {
  /deep/ .el-step {
    &.active {
      .el-step__icon {
        background-color: #fff;
        color: #409eff;
      }
    }
    .el-step__icon {
      width: 50px;
      height: 50px;
      border-color: #409eff;
      font-size: 18px;
      background: #409eff;
      color: #fff;
    }
    .el-step__line {
      top: 24px;
      background-color: #f3f3f3;
    }
    .el-step__title {
      font-size: 14px;
    }
  }
}
.operaList {
  padding: 40px 80px;
  text-align: right;
}
</style>
